<template>
    <view class="app">


        <view class="lianxi">

            <view class="ddd">
                <u-modal :show="isModalShow" @close="closeModal" margin-top="200px">
                    <view style="font-weight: bold;">退出确认</view>
                    <view style="margin-top: 30px;">资料尚未保存，是否取消编辑?</view>
                    <view class="sure" @click="sure">确认</view>
                </u-modal>
                <view class="open-modal-btn" @click="showModal" style="color: blue;">取消</view>

            </view>
            <view class="xin">新建普通任务</view>
            <u-popup :show="show" mode="center" @close="close">
                <view>
                    <view><img src="/static/img/dui.png" alt="" style="width: 30px; height: 30px; margin-top: 8px;"></view>
                    <text @click="open">保存成功</text>
                </view>
            </u-popup>
            <view @click="show = true" style="color: blue;">保存</view>
        </view>
        <view class="one">
            <view class="a">
                <input type="text" placeholder="输入任务标题">
            </view>
            <view class="two">

                <li class="two_z">
                    <p>
                        开始日期<span style="color: red;">*</span>
                    </p>
                    <p style="color: #ccc;" @click="sheng">点击选择 &gt; </p>
                </li>
                <li class="two_z">
                    <p>
                        结束时间<span style="color: red;">*</span>
                    </p>
                    <p style="color: #ccc;" @click="sheng">点击选择 &gt; </p>
                </li>


                <li class="two_z">
                    <p>
                        负责人员<span style="color: red;">*</span>
                    </p>
                    <p @click="guishu">
                        <img src="/static/img/11.png" alt="" style="width: 30px; height: 30px; vertical-align: middle;">
                        <span>赵小刚 <span style="color: #ccc;"> &gt;</span> </span>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        紧要程度
                    </p>
                    <p style="color: #ccc;" @click="jinyaochendu">点击选择 &gt; </p>
                </li>
                <li class="two_z">
                    <p>
                        关联业务
                    </p>
                    <p style="color: #ccc;" @click="guanlianyewu">点击选择 &gt; </p>
                </li>

                <li class="two_zz">
                    <p style="margin-left: 15px; margin-top: 15px;">
                        任务描述
                    </p>
                    <p style="color: #ccc;"> <input type="text" placeholder="请输入任务描述"
                            style="margin-top: 20px; margin-left: 30px;"></p>
                </li>

                <li class="two_z">
                    <p>
                        上传附件
                    </p>
                    <qiaotankuang></qiaotankuang>
                </li>
            </view>
            <view class="two">

                <p style=" width: 375px;height: 40px; background-color: #fff;">参与人员</p>
                <li class="shuikan">
                    <view>

                        <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi">
                        <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                        <p>赵小刚</p>
                    </view>
                    <view>
                        <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi1">
                        <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                        <p>周小明</p>
                    </view>
                    <view>
                        <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi2">
                        <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                        <p>郭小涛</p>
                    </view>
                    <view>
                        <img src="/static/img/23.png" alt="" style="width: 20px;height: 20px;" class="gouzi3">
                        <img src="/static/img/11.png" alt="" style="width: 40px;height: 40px;">
                        <p>张小伟</p>
                    </view>
                    <view @click="haoduo">
                        <button style="width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ccc;">+</button>
                        <p style="margin-top: 4px;">更多</p>
                    </view>
                </li>
                <li class="two_z">
                    <p>
                        任务标记
                    </p>
                    <p>
                    <p class="tab">
                        <span class="taba1" :class="{ active: currentTab === 0 }" @click="switchTab(0)" data-tab="0"></span>
                        <span class="taba2" :class="{ active: currentTab === 1 }" @click="switchTab(1)" data-tab="1"></span>
                        <span class="taba3" :class="{ active: currentTab === 2 }" @click="switchTab(2)" data-tab="2"></span>
                        <span class="taba4" :class="{ active: currentTab === 3 }" @click="switchTab(3)" data-tab="3"></span>
                        <span class="taba5" :class="{ active: currentTab === 4 }" @click="switchTab(4)" data-tab="4"></span>
                        <span class="taba6" :class="{ active: currentTab === 5 }" @click="switchTab(5)" data-tab="5"></span>
                        <span class="taba7" :class="{ active: currentTab === 6 }" @click="switchTab(6)" data-tab="6"></span>
                    </p>

                    </p>
                </li>

                <li class="two_z">
                    <p>
                        任务提醒
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="tixing">点击选择 &gt; </p>

                    </p>
                </li>
                <li class="two_z">
                    <p>
                        提醒方式<span style="color: red;">*</span>
                    </p>
                    <p>
                    <p style="color: #ccc;" @click="fangshi">点击选择 &gt; </p>

                    </p>
                </li>
            </view>
        </view>
        <view class="footer"></view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import qiaotankuang from "../qiao-sousuo/qiaotankuang.vue";


const currentTab = ref(0)
const switchTab = (tab: number) => {
    currentTab.value = tab;
};
const isModalShow = ref(false)
const showModal = () => {
    isModalShow.value = true
}
const closeModal = () => {
    isModalShow.value = false
}


const show = ref(false)
const open = () => {
    show.value = false
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaokehuguanli'
    })
}

const close = () => {
    show.value = false
}


const sheng = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshengri'
    })
}

const tixing = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaotixing'
    })
}
const fangshi = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaofangshi'
    })
}
const sure = () => {
    uni.navigateBack({
        delta: 1,
    })
}
const guishu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoguishu'
    })
}
const haoduo = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaohaoduo'
    })
}
const jinyaochendu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaojinyaochendu'
    })
}
const guanlianyewu = () => {
    uni.navigateTo({
        url: '/pages/qiao-crm/qiao-sousuo/qiaoshezhi/qiaoguanlianyewu'
    })
}
</script>

<style lang="scss">
.app {
    width: 100vw;
    height: 100vh;
}

.active {
    background-image: url(/static/img/dui.png);
    width: 10px;
    height: 10px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}


.tab {
    display: flex;
    text-align: center;

}

.taba1 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(251, 98, 96);
    margin-right: 10px;
}

.taba2 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(255, 169, 76);
    margin-right: 10px;
}

.taba3 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(88, 163, 247);
    margin-right: 10px;
}

.taba4 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(254, 192, 61);
    margin-right: 10px;
}

.taba5 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(82, 193, 245);
    margin-right: 10px;
}

.taba6 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(129, 103, 245);
    margin-right: 10px;
}

.taba7 {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgb(70, 76, 91);
    margin-right: 10px;
}

.gouzi {
    position: absolute;
    left: 40px;
    top: -15px;

}

.gouzi1 {
    position: absolute;
    left: 110px;
    top: -15px;

}

.gouzi2 {
    position: absolute;
    left: 180px;
    top: -15px;

}

.gouzi3 {
    position: absolute;
    left: 250px;
    top: -15px;

}

.shuikan {
    display: flex;
    background-color: #fff;
    height: 100px;
    text-align: center;
    position: relative;

    view {
        width: 70px;
    }
}

.xin {
    margin-left: 100px;
}

.u-popup__content {
    height: 100px;
    text-align: center;
    border-radius: 10px;
    line-height: 50px;
}

.ddd {
    position: relative;
}

.sure {
    position: absolute;
    top: 150px;
    color: blue;
    // z-index: 999;
}

.u-modal__content {
    height: 100px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;


}

.u-modal {
    z-index: 99;
    position: fixed;
    top: 150px;
    left: 30px;
    background-color: white;
}

.confirm-btn {
    padding: 10px 20px;
    background-color: #1c94e0;
    color: #fff;
    border-radius: 5px;
}

.two_zz {
    height: 200px;
    background-color: white;
    border: 1px solid #ccc;
}

.two {
    margin-top: 20px;
}

.two_z {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px;
    border: 1px solid #ccc;
    height: 25px;
    background-color: white;

}

.a {
    input {
        height: 40px;
        border: 1px solid #ccc;
        width: 360px;
        margin-top: 30px;
        background-color: white;
    }
}

.lianxi {
    width: 330px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 3px 20px;
    height: 40px;
    background-color: white;

}

.one {
    height: calc(100% - 40px - 80px);
    background-color: rgb(238, 238, 238);
    margin-top: 0px;
    width: 360px;
    margin-left: 8px;
    border: 1px solid #ccc;
    overflow: hidden;
    overflow-y: scroll;
}
</style>